<template>
	<view class="addressmianbox">
		<qi_navigation :navzuoicof="'icon-icon-test59'"></qi_navigation>
		<scroll-view scroll-y class="scroll">
			<addresslist
				@emitdelete="emitdelete"
				@upaddress="upaddress"
				:addressdata="deta.addresdata"
				v-if="deta.ishsow"
			></addresslist>
			<view class="addresscenter" v-else>
				<view class="addname">
					<text>收货人</text>
					<input
						placeholder="请填写收货人姓名"
						v-model="deta.address.name"
					/>
				</view>
				<view class="aaddtel">
					<text>手机号码</text>
					<input
						placeholder="请填写收货人手机号"
						v-model="deta.address.phone"
					/>
				</view>
				<view class="region" @tap="visible = !visible">
					<text>所在地区</text>
					<input placeholder="省市区" :value="location" disabled />
				</view>
				<view class="detailedaddress">
					<text>详细地址</text>
					<textarea v-model="deta.address.address"></textarea>
				</view>
				<view class="consentaddress">
					<text>设置默认地址</text>
					<switch
						:checked="deta.address.is_default == 1 ? true : false"
						@change="showswitch"
						style="transform:scale(0.7)"
					/>
				</view>
			</view>
			<view class="uni-padding-wrap" v-show="visible">
				<picker-view @change="bindChange"  class="picker-view">
					<picker-view-column>
						<view
							class="item"
							v-for="(item, index) in deta.provincedata"
							:key="index"
						>
							{{ item.name }}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view
							class="item"
							v-for="(item, index) in deta.citydata"
							:key="index"
						>
							{{ item.name }}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view
							class="item"
							v-for="(item, index) in deta.countydata"
							:key="index"
						>
							{{ item.name }}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</scroll-view>
		<view class="addressbut">
			<text v-if="deta.ishsow" @tap="Tapaddressbut">
				+新增收货地址
			</text>
			<text v-else @tap="tapsubaddres">保存收货地址</text>
		</view>
	</view>
</template>
<script setup>
import {
	getcity,
	addaddress,
	getaddress,
	deladdress
} from '@/http/api.js';
import {
	ref,
	reactive,
	onMounted,
	getCurrentInstance,
	computed
} from 'vue';
import addresslist from './addresslist.vue';
const { proxy } = getCurrentInstance();
const deta = reactive({
	provincedata: [],
	citydata: [],
	countydata: [],
	addresdata: [],
	ishsow: false,
	upid: '',
	address: {
		name: '',
		address: '',
		phone: '',
		is_default: 1,
		province: '',
		city: '',
		county: ''
	}
});
let indicatorStyle = ref(`height: 50px;`) 
let reg_tel = ref(
	/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
); //11位手机号码正则
// let reg_user = ref(/^[\u4e00-\u9fa5]{2,8}$/); //2-8个中文字符正则
let visible = ref(false);
let location = computed(() => {
	return (
		deta.address.province + deta.address.city + deta.address.county
	);
});
onMounted(() => {
	bindChange()
	getaddress().then(res => {
		console.log(res);
		if (Object.keys(res.data).length !== 0) {
			deta.addresdata = res.data;
			deta.ishsow = true;
			deta.addresdata.map((item, index) => {
				if (item.is_default == 1) {
					deta.addresdata.unshift(
						deta.addresdata.splice(index, 1)[0]
					);
				}
			});
		}
	});
});
const showpicker = () => {
	visible.value = false;
};

// 修改
const upaddress = i => {
	deta.ishsow = false;
	deta.address = {
		name: deta.addresdata[i].name,
		address: deta.addresdata[i].address,
		phone: deta.addresdata[i].phone,
		is_default: deta.addresdata[i].is_default,
		province: deta.addresdata[i].province,
		city: deta.addresdata[i].city,
		county: deta.addresdata[i].county
	};
	deta.upid = deta.addresdata[i].id;
};
// 默认地址
const showswitch = e => {
	e.detail.value == true
		? (deta.address.is_default = 1)
		: (deta.address.is_default = 0);
};
const emitdelete = id => {
	deladdress(id).then(res => {
		getaddress().then(res => {
			if (Object.keys(res).length !== 0) {
				deta.addresdata = res.data;
				deta.addresdata.map((item, index) => {
					if (item.is_default == 1) {
						deta.addresdata.unshift(
							deta.addresdata.splice(index, 1)[0]
						);
					}
				});
			}
		});
	});
};
// 新增
const Tapaddressbut = () => {
	deta.ishsow = false;
};
// 保存
const tapsubaddres = () => {
	if (!reg_tel.value.test(deta.address.phone)) {
	return	proxy.islogin.showToast('11位手机号码');
	}else if (deta.address.address === ''){return proxy.islogin.showToast('详细地址不能为空')}
	else if (deta.address.name === ''){return proxy.islogin.showToast('名字不能为空');}
	if (deta.upid) {
		deladdress(deta.upid).then(res => {});
	}
	addaddress(deta.address).then(res => {
		console.log(res);
		deta.ishsow = false;
		deta.address = {
			name: '',
			address: '',
			phone: '',
			is_default: 1,
			province: [],
			city: [],
			county: []
		};
		uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
			delta: 1
		});
		// uni.navigateBack()
		// uni.switchTab({
		// 	url: '/pages/cart/cart'
		// });
	});
};
const throttlebind = (e) =>{
	console.log(e);
	let val = [0,0,0]
if(e){
	val[0] = e.detail.value[0] || 0
	val[1] = e.detail.value[1] || 0
		val[2] = e.detail.value[2] || 0
}
	console.log(deta.address.county);
// if(e){
// 	if(e.detail.value[0]){
// 		// val[0] = e.detail.value[0]
// 		val = [e.detail.value[0],0,0]
// 	} else if(e.detail.value[1]){
// 		val = [e.detail.value[0],e.detail.value[1],0]
// 	}else (e.detail.value[2]){
// 		val = [e.detail.value[0],e.detail.value[1],e.detail.value[2]]
// 	}
// }
	// 市
	getcity().then(res => {
		deta.provincedata = Object.keys(res).map(i => {
			return res[i];
		})
		// 区
	getcity({ pid: deta.provincedata[val[0]].id }).then(data => {
		deta.citydata = Object.keys(data).map(i => {
			return data[i];
		});
		getcity({ pid: deta.citydata[val[1]].id }).then(item => {
			deta.countydata = Object.keys(item).map(i => {
				return item[i];
			});
	deta.address.province = deta.provincedata[val[0]].name;
	deta.address.city = deta.citydata[val[1]].name;
	deta.address.county = deta.countydata[val[2]].name;
			})
		})
			})
		
}
const bindChange = e => {
	proxy.islogin.debounce(throttlebind(e))
	
};
</script>

<style lang="scss">
.addressmianbox {
	position: relative;
	height: 100vh;
	.uni-padding-wrap {
		position: absolute;
		// bottom: 20px;

	}

	.picker-view {
		width: 750rpx;
		height: 150px;
	}
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		// height: 100px;
		text-align: center;
	}
	.scroll {
		height: calc(100vh - 100px);
 box-sizing: border-box;
		.addresscenter {
			background-color: #fff;
			position: relative;
			padding: 0 20rpx;
			text {
				padding-right: 10px;
				font-size: 30rpx;
				font-weight: 700;
			}
			view {
				border-bottom: 1px solid;
			}
			.addname {
				display: flex;
				height: 50px;

				line-height: 50px;
				align-items: center;
				input {
					flex: 1;
				}
			}
			.aaddtel {
				height: 50px;
				display: flex;
				line-height: 50px;
				align-items: center;
				input {
					flex: 1;
				}
			}
			.region {
				position: relative;
				display: flex;
				height: 50px;
				line-height: 50px;
				align-items: center;
				input {
					flex: 1;
				}
			}
			.detailedaddress {
				display: flex;
				height: 200px;
				align-items: center;
				justify-content: space-between;
				text{
					width: 200rpx;
					word-break:keep-all;     /* 不换行 */
					white-space:nowrap;      /* 不换行 */
					overflow:hidden;         /* 内容超出宽度时隐藏超出部分的内容 */
					text-overflow:ellipsis;  /* 溢出时显示省略标记...；需与overflow:hidden;一起使用*/
				}
				textarea {
					border: 1px solid;
				}
			}
			.consentaddress {
				display: flex;
				height: 50px;
				line-height: 50px;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.addressbut {
		height: 50px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		text {
			border-radius: 90px;
			background-color: rgb(49, 145, 253);
			color: #fff;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
